import React, { useMemo } from "react";
import PropTypes from "prop-types";
import { Comment, List } from "antd";
import { dateFormat } from "../../lib/utils";

function CommentList(props) {
    const { comments } = props;

    const data = useMemo(() => {
        const list = comments.map((comment) => ({
            author: (
                <p className="nickname">
                    {comment.website ? (
                        <a target="_blank" rel="noreferrer" href={comment.website}>
                            {comment.nickname}
                        </a>
                    ) : (
                        comment.nickname
                    )}
                </p>
            ),
            content: <p className="comment">{comment.comment}</p>,
            datetime: (
                <p className="createTime">
                    {dateFormat(new Date(comment.createTime), 'yyyy-MM-dd hh:mm:ss')}
                </p>
            ),
        }));
        return list;
    }, [comments]);

    return (
        <List
            id="commentList-container"
            className="comment-list"
            header={`${data.length} 条留言`}
            itemLayout="horizontal"
            dataSource={data}
            renderItem={(item) => (
                <li>
                    <Comment
                        author={item.author}
                        content={item.content}
                        datetime={item.datetime}
                    />
                </li>
            )}
        />
    );
}

CommentList.propTypes = {
    // eslint-disable-next-line react/forbid-prop-types
    comments: PropTypes.any.isRequired,
    // comments: PropTypes.array.isRequired,
};

export default CommentList;
